<template>
  <div class="v-edit" v-if="showDialog">
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="false"
        v-model="visible"
        width="800"
    >
      <template #header>
        <div class="flex justify-between items-center my-header">
          <h4 class="text-xl font-bold">编辑项</h4>
          <XIcon class="w-4 h-4 cursor-pointer" @click="close"/>
        </div>
      </template>
      <div>
        <el-form
            ref="formRef"
            class="v-form"
            :disabled="isView"
            :model="infos"
            :rules="rules"
        >
          <div>
            <div class="one-col intro-y">
              <wde-input label="省份" prop="tchName" v-model="info.tchName"/>
            </div>
            <div class="one-col intro-y">
              <wde-input label="市" prop="tchName" v-model="info.tchName"/>
            </div>
          </div>
        </el-form>
        <div class="intro-y">
          <el-table :data="tableData" stripe style="width: 100%;height: 300px">
            <el-table-column prop="date" label="类型"/>
            <el-table-column prop="date" label="日出力"/>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="mr-2" @click="close">取消</el-button>
          <el-button type="primary" @click="save"> 保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, watch, computed, getCurrentInstance} from "vue";
import {ElDialog} from "element-plus";

const {proxy} = getCurrentInstance();
// Props
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  infos: {
    type: Object,
    default: () => ({}),
  },
  rules: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref(null);
// Refs and state
const visible = ref(true);
// const user = ref($userInfor());
const info = ref({});
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const save = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("save", info.value);
    }
  });
};

const close = () => {
  visible.value = false;
  emit("close");
};
// Watchers
watch(
    () => props.showDialog,
    () => {
      visible.value = true;
    }
);

// Emit
const emit = defineEmits(["reset", "save", "submit", "close"]);
</script>

<style scoped>
/* Add any required styles here */
</style>